<template>
    <div class="login">
        <div class="form">
            <div class="title">
                <span>管理员登录</span>
            </div>
            <div class="opt">
                <div class="label">
                    <el-icon>
                        <User />
                    </el-icon>
                </div>
                <div class="inpbox"><input type="text" placeholder="请输入账号/邮箱" v-model="user.account"></div>
            </div>
            <div class="opt">
                <div class="label"><el-icon>
                        <Lock />
                    </el-icon></div>
                <div class="inpbox"><input type="text" placeholder="请输入密码" v-model="user.password"></div>
            </div>
            <div class="opt">
                <div class="label"><el-icon>
                        <Picture />
                    </el-icon></div>
                <div class="inpbox"><input type="text" placeholder="请输入验证码" v-model="user.captcha"></div>
                <div class="vcode" @click="getVerify"><canvas ref="canvas"></canvas></div>
            </div>
            <div class="opt">
                <router-link to="/findpwd">忘记密码？</router-link>
            </div>
            <div class="opt">
                <button class="btn" @click="singinFn">登录</button>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
@import '../common/scss/variable.scss';

.login {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: skyblue;
    background-image: url(../common/img/bg2.jpg);
    background-size: cover;
    background-repeat: no-repeat;

    .form {
        width: 450px;
        border: 1px solid #f0f0f0;
        padding: 15px 20px;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;

        .title {
            text-align: center;
            padding: 20px 0;

            span {
                display: inline-block;
                border-bottom: 2px solid $borderColor;
                padding: 10px 10px;
                color: $activeColor;
            }
        }

        .opt {
            width: 100%;
            display: flex;
            height: 42px;
            margin-bottom: 10px;

            .label {
                width: 50px;
                height: 40px;
                background-color: #f0f5ff;
                border: 1px solid #ccc;
                border-right: 0;
                flex-shrink: 0;
                text-align: center;
                line-height: 40px;
            }

            .inpbox {
                width: calc(100% - 50px);

                input {
                    font-size: 16px;
                    height: 40px;
                    line-height: 40px;
                    display: block;
                    border: 1px solid #ccc;
                    width: 100%;
                    padding-left: 10px;
                }
            }

            a {
                color: #666666;
                font-size: 15px;
            }

            .btn {
                width: 100%;
                height: 40px;
                background-color: $bgColor;
                font-size: 16px;
                color: #fff;
                cursor: pointer;
            }

            canvas {
                cursor: pointer;
                margin-left: 10px;
            }
        }
    }
}
</style>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElMessage } from 'element-plus'
import api from '../api/index'
import { singin, test } from '../api/request'
import { useRouter } from 'vue-router'

let canvas = ref<Element>();
let pen: any
let w: number = 100
let h: number = 40
let host: string = api.url

type U = {
    account: string
    password: string
    captcha: string
}
let user = ref<U>({
    account: "",
    password: "",
    captcha: "",
})

const $router = useRouter();

// 登录函数
const singinFn = async () => {
    let { account, password, captcha } = user.value
    if (account && password && captcha) {
        let isShow;
        // console.log(1);

        await test({ captcha })
            .then(
                content => {
                    if (content.code == 200) {
                        isShow = true;
                    }
                    else {
                        ElMessage({
                            type: 'error',
                            message: content.msg
                        })
                    }
                }
            )
        if (isShow) {
            await singin({ account, password, role: 1 })
                .then(
                    content => {
                        let { code, msg } = content
                        if (code == 200) {
                            let { nickName, token } = content;
                            localStorage.setItem('NICK_NAME', nickName)
                            localStorage.setItem('TOKEN', token)
                            ElMessage({
                                type: 'success',
                                message: content.msg
                            })
                            setTimeout(() => {
                                $router.replace({ path: '/' })
                            }, 150);
                        } else {
                            ElMessage({
                                type: 'error',
                                message: content.msg
                            })
                        }
                    }
                )
        }
    }
    else {
        // console.log(2)
        ElMessage({
            type: 'error',
            message: "输入框不能为空",
        })
    }
}

onMounted(() => {
    let ele = canvas.value;
    let img = new Image();
    img.src = `${host}/api/verify/captcha`
    if (ele) {
        ele.width = w;
        ele.height = h;
        pen = ele.getContext('2d');
        img.onload = () => {
            pen.drawImage(
                img,
                0,
                0,
                w,
                h
            )
        }
    }
})
// 点击获取验证码
const getVerify = () => {
    let img = new Image();
    img.src = `${host}/api/verify/captcha?${Math.random()}`;
    pen.clearRect(0, 0, w, h);
    img.onload = () => {
        pen.drawImage(
            img,
            0,
            0,
            w,
            h
        )
    }
}
</script>